<template>
	<div class="view">
		<!-- <template>
			<Top :title="'招聘列表'"></Top>
		</template> -->
		<div class="header">
			<div class="h_exit" @click="toIndex">
				<i class="i-exit i-20 i-mr-10"></i>
				<div class="h_str">返回上一页</div>
			</div>
			<div class="h_con">
				<!-- <div class="h_li">招聘列表</div> -->
				<div class="toggle_ul">
					<div class="toggle_li" :class="{'active':li_num==1}" @mouseenter="enter(1)" @mouseleave="leave" @click="li_click(1)">招聘列表</div>
					<div class="toggle_li" :class="{'active':li_num==2}" @mouseenter="enter(2)" @mouseleave="leave" @click="li_click(2)">待审核</div>
					<div class="toggle_li" :class="{'active':li_num==3}" @mouseenter="enter(3)" @mouseleave="leave" @click="li_click(3)">已拒绝</div>
					<div class="li_bottom" :style="{left:left+'px'}"></div>
				</div>
			</div>
		</div>

		<div class="main">
			<div class="main_con">
				<div class="m_title">招聘列表</div>
				<div class="line">
					<div class="search">
						<el-input placeholder="请输入关键词" suffix-icon="el-icon-search" v-model="keywords"
							@change="search" size="medium" style="width: 200px;">
						</el-input>
						<el-select v-model="isTimeIm" placeholder="请选择" style="width: 200px;margin-right: 10px">
							<el-option v-for="item in options" :key="item.val" :label="item.label"
								:value="item.val">
							</el-option>
						</el-select>
						<el-button type="primary" size="medium" @click="search">搜索</el-button>
					</div>
					<div class="s_btn">
						<el-button icon="el-icon-plus" size="medium" type="primary" @click="add">新增招聘信息
						</el-button>
					</div>
				</div>

				<div class="table">
					<el-table style="width: 100%;" :data="dataList" :height="table_height">
						<el-table-column type="selection" min-width="5%" align="center">
						</el-table-column>
						<el-table-column type="index" :index="1" label="行号" min-width="10%" align="center">
						</el-table-column>
						<el-table-column label="职位名称" min-width="35%" align="center" prop="title">
							<template slot-scope="scope">
								{{ scope.row.title || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="意向岗位" min-width="15%" align="center" prop="gangwei">
							<template slot-scope="scope">
								{{ scope.row.gangwei || '-' }}
							</template>
						</el-table-column>
						<el-table-column prop="workType" label="工作形式" min-width="15%" align="center">
							<template slot-scope="scope">
								{{ scope.row.workType || '-' }}
							</template>
						</el-table-column>
						<el-table-column prop="workTime" label="工作时间" min-width="25%" align="center">
							<template slot-scope="scope">
								{{ scope.row.workTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column prop="workSalary" label="薪资标准" min-width="20%" align="center">
							<template slot-scope="scope">
								{{ scope.row.isMianyi==1?"面议":(scope.row.workSalary || '-') }}
							</template>
						</el-table-column>
						<!-- <el-table-column prop="province" label="省份" min-width="15%" align="center">
							<template slot-scope="scope">
								{{ scope.row.province || '-' }}
							</template>
						</el-table-column> -->
                        <el-table-column prop="city" label="城市" min-width="20%" align="center">
							<template slot-scope="scope">
								{{ scope.row.city || '-' }}
							</template>
						</el-table-column>
                        <el-table-column prop="timeCreate" label="创建日期" min-width="20%" align="center">
							<template slot-scope="scope">
									{{ scope.row.timeCreate ? scope.row.timeCreate.split(" ")[0] : '-' }}
								</template>
						</el-table-column>
						<el-table-column prop="isOk" label="是否上架" min-width="15%" align="center">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.isOk" active-color="#13ce66" inactive-color="#A5ADBA"
									:active-value="1" :inactive-value="0" @change="isOkHandler(scope.row)">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="teacher" label="操作" min-width="30%" align="center">
							<template slot-scope="scope">
								<el-button size="mini" plain @click="setStatus(scope.row)" v-if="status!=0">审核</el-button>
								<el-button size="mini" plain @click="edit(scope.row)"  v-if="status==0">编辑</el-button>
								<el-button size="mini" plain @click="remove(scope.row)">移除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="item_bottom">
					<div class="item_num">共{{ total }}条信息</div>
					<div class="item_page">
						<el-pagination background layout="prev, pager, next" :total="total"
							@current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Top from "../../components/top.vue"
import {mapGetters , mapState} from "vuex";
export default {
	components: {
		Top,
	},
	data() {

		
		return {
			keywords: "",
			table_height: document.documentElement.clientHeight - 360,
			diaHeight: document.documentElement.clientHeight - 142,
			dataList: [],
			total: 0,
			dialogVisible: false,


			li_num: 1,
			left:0,
			current: 1,
			limit: 10,
			isEdit:false,
			status:0,
			isTimeIm:0,
			options:[
				{
					label:"全部",
					val:0
				},
				{
					label:"超过2个月未沟通",
					val:1
				},
				
			],
		}

	},
	computed:{
		...mapGetters(['isRole']),
		...mapState(['zhaopinLiNum'])
	},
	methods: {
		// 重设密码
		reset(item){
			this.form.adminname = item.adminname
			console.log(this.form)
			this.dialogVisible = true;
		},

		comment2(){
			this.$refs.form.validate((valid)=>{
				if(valid){
					this.isEdit = true;
					this.$http({
						url:this.$api.adminUpdate,
						method:'post',
						data:{
							id:this.form.id,
							pwd:this.form.pwd
						}
					}).then(res =>{
						if(res.data.code==20000){
							this.$message.success(res.data.message);
							this.dataInit();
							this.$refs.form.resetFields();
						}else{
							this.$message.error(res.data.message)
						}
						this.isEdit = false;
					})
				}
			})
		},

		// 修改用户
		edit(item){
			this.$store.commit("setUrlParma",{id:item.id})
			this.$router.push("/recruit/update")
		},

		// 是否有效
		isOkHandler(item) {
			this.$http({
				url: this.$api.pinEdit,
				method: 'post',
				data: {
					id: item.id,
					isOk: item.isOk,
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
				} else {
                    item.isOk = item.isOk==0? 1:0
					this.$message.error(res.data.message)
				}
			})
		},

		// 搜索
		search() {
			this.current = 1
			this.dataInit()
		},
		userAdd() {
			this.$router.push('/recruit/add')
		},
		toIndex() {
			this.$router.push('/')
		},
		toNum(val){
			this.li_num = val
			if(val==1){
				this.left = 0
			}else{
				this.left = (val-1)*100
			}
		},
		
		to_exit(){
			this.$router.push('/index')
		},
		enter(num){
			if(num==1){
				this.left = 0
			}else{
				this.left = (num-1)*100
			}
		},
		leave(){
			if(this.li_num==1){
				this.left = 0
			}else{
				this.left = (this.li_num-1)*100
			}
		},

		// 打开上传图片弹窗
		imgUpload() {
			this.cropperModel = true
		},

		comment1() {
			this.$refs['form1'].validate((valid) => {
				if (valid) {

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		dataInit() {
			this.$http({
				'method': 'post',
				'url': this.$api.pinList,
				data: {
					current: this.current,
					limit: this.limit,
					keywords: this.keywords,
					status:this.status,
					isTimeIm:this.isTimeIm
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.dataList = res.data.data.list
					this.total = res.data.data.total
				}
			})
		},


		// 分页
		handleCurrentChange(num) {
			this.current = num;
			this.dataInit();
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			this.cropperModel = false;
			this.cropperName = '';
			this.form1.picdir = data.url
		},

		// 删除
		remove(item) {
				this.$confirm('是否删除此信息?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url:this.$api.pinRemove+item.id
					}).then(res =>{
						if(res.data.code==20000){
							this.$message.success(res.data.message);
							this.dataInit();
						}else{
							this.$message(res.data.message)
						}
					})
				}).catch(() => {
					
				});
			},

		//审核
		setStatus(item){
			this.$store.commit("setUrlParma",{id:item.id})
			this.$router.push("/recruit/status")
		},
		add(){
			this.$router.push("/recruit/add")
		},
		li_click(num){
			let s = this.status
			let s_ = 0;
			if(num==1){
				//招聘管理
				s_=0
			}else if(num==2){
				//待审核
				s_=1
			}else if(num==3){
				//审核拒绝
				s_=2
			}
			if(s!=s_){
				this.$store.commit("setZhaopinLiNum",{zhaopinLiNum:num})
				this.current = 1
				this.li_num=num
				this.status=s_
				this.dataInit()
			}
		},
	},
	created() {
		this.li_num=this.zhaopinLiNum
		this.li_click(this.zhaopinLiNum)
		this.toNum(this.zhaopinLiNum)
		this.dataInit()
	}

}
</script>

<style scoped>
@import url("../../assets/css/configure.css");
@import url("../../assets/css/class.css");
.h_exit{
	z-index: 10;
}
</style>
